<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>

    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="5-1" open-index="5"></sideBar>
      </el-aside>
      <el-main>
        <el-table
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          @selection-change="handleSelectionChange"
          height="502"
          style="width: 100%; margin-top: 20px">


          <el-table-column
            prop="id"
            label="编号">
          </el-table-column>

          <el-table-column
            prop="event_type"
            label="事件类型">
          </el-table-column>

          <el-table-column
            prop="event_location"
            label="位置" >
          </el-table-column>

          <el-table-column
            prop="event_date"
            label="日期">
          </el-table-column>

          <el-table-column
            prop="event_desc"
            label="描述" >
          </el-table-column>



        </el-table>
        <!--角标-->
        <div style="text-align: center;margin-top: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            @current-change="current_change">
          </el-pagination>
        </div>

      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";
export default {
  components: {sideBar, navMenu},
  data() {
    return {
      tableData: [],
      total: 0,
      pagesize: 8,
      currentPage: 1,
      st: 2,
      drawer: false,
      drawer2: false,
      direction: 'rtl',
    }
  },
  mounted() {
    this.$axios.get(`http://127.0.0.1:5000/formInfo`).then((res) => {
      console.log(res);
      this.tableData = res.data;
      this.total = this.tableData.length;
      this.total = this.tableData.length;
      console.log(this.total);
      console.log(res.data);
    });
  },
  methods: {
    current_change: function(currentPage){
      this.currentPage = currentPage;
    }
  }
}
</script>

<style>


.menu{
  width: 100%;
  float: left;
  height: 700px;
}
</style>
